Avant-propos
Désolé…
-
…pour l’anglais (really?)
-
… de ne pas être un spécialiste d’Android
-
… que vous soyez la 1ère promo à subir ce cours
-
…que ce cours arrive avant que vous sachiez développer en Android/Mobile
-
… que vous ayiez à bosser sans ordi ce matin! (au moins 1h30!)
1. Content
-
Brainstorming & organization
-
Brainstorming & organization
-
Internet search & site web building
-
UML & Modeling for Mobile Applications
-
Case study
2. Organisation prévue
Module de 21h :
-
4 créneaux semaine 41
-
[1] Intro & Brainstorming
-
[2] Travail de groupe
-
[3] Première maquette du site Web
-
[4] UML rappel et concepts importants
-
-
10 créneaux semaine 42
-
[5] Gestion de projet spécifique, UML
-
[6] Mise en oeuvre sur une étude de cas
-
[7-8] Reverse ingéniérie d’une application Android
-
[9-13] Modélisation : projet perso (binôme)
-
[14] Présentation publique de votre appli perso (binôme)
-
[14] QCM exam final
-
3. Let’s start Brainstorming
4. Wrap-up
Par petits groupes :
-
[1] Préparation du site web
-
[2] Liste des concepts UML connus et utiles
-
[3] Outils et langages de description d’écrans
-
[4] Plateformes de développement Android
-
[5] Différences iOS /Android
-
[…] Résultats du brainstorm
| Les numéros ne représentent pas un ordre d’importance! |
4.1. Plans B …
-
Spécificités des applications mobiles
-
Modélisation des interfaces
-
Modélisation de l’architecture
-
Modélisation du comportement
-
Agilité et applications mobiles
4.2. [1] Site web des fiches
-
Simple et statique
-
Moderne (Foundation, Bootstrap, Awestruct)
-
Multilingue compliant (FR/UK)
| Je fait parti de ce groupe! |
4.3. [2] Concepts UML connus
-
1. Recensement des concepts connus
-
diagrammes
-
concepts dans ces diagrammes
-
méthodes (RUP, OpenUP, Agile)
-
⇒ Google Sheet ?
-
-
2. Pour le Mobile Modeling
-
brainstorming
-
4.4. [3] Outils et langages de description d’écrans
-
Type SNI (Schéma de Navigation des Interfaces)
-
Dessin / Générationd de code
-
Focus sur les Open Sources of course
4.5. [4] Plateformes de développement Android
-
Avis objectifs (chiffrés)
-
Aspects historiques
-
Focus sur les Open Sources of course
4.6. [5] Différences /
-
Niveau modélisation
-
Concepts
-
Cycle de développement
4.7. Consignes
Pour chaque groupe (sauf [1]) :
-
Exprimer le problème
-
Rechercher les solutions existantes
-
Brainstormer sur la meilleure solution
-
La formaliser un minimum
-
Remplir un poster de la forme Fiche
-
Merger sa branche
4.8. Fiche
-
Titre
-
Motivations & problems (shortly)
-
Current approaches
-
Proposed approach
-
Example
-
4.9. Résultats
En 2015/2016 nous avons eu deux équipes chargées du site web :
5. Exemple complet de démarche "ad hoc" autour d’UML
Nous allons aborder une étude de cas tirée du livre de Pascal Roques.
|
Pour un apperçu du livre, cf. http://www.editions-eyrolles.com/Chapitres/9782212110708/chap01.pdf. |
5.1. Le cahier des charges
Il s’agit de développer un service de vente en ligne (http://jeBouquine.com).
| Depuis l’écriture du livre un vrai site de vente utilise cette URL! |
5.2. Des besoins au code
5.3. Raffinement des besoins
5.4. Près du code
5.5. Comment trouver les classes ?
5.6. Comment trouver les interactions ?
5.7. Liens entre diagrammes
5.8. Démarche complète
6. Diagrammatic models
6.1. UML Use Case Diagram
6.2. SysML Requirements Diagram
6.3. Sketch and drawings (Maquettes)
| L’IUT de Blagnac a une licence éducation qui vous permet d’utiliser gratuitement Balsamiq : https://iutblagnac.mybalsamiq.com. |
6.4. UML Class Diagram
6.5. SNI: Schéma de Navigation d’Interface
6.6. UML Sequence Diagram
6.7. UML Component Diagram
6.8. SysML Block Definition Diagram
6.9. UML deployment diagram
6.10. SysML Internal Block Definition Diagram
7. Process examples
7.1. One example
-
1) Identify the app users
-
2) Identify the main functionalities
-
3) Analyzing and expanding each functionality
7.2. Agile for Mobile Application Development
7.2.1. Example 1
Some restrictions with mobile application development are:
-
Mobile has restrictions: size of the apps, …
-
Application should be downloadable very fast
-
Update applications quickly and smoothly
-
Error free and fast
-
Seamlessly interact with backend server as needed
7.2.2. Example 2
Challenges presented by developing mobile apps:
-
Short life cycles
-
Short development cycles
-
Limited hardware
-
Frequently changing user demands
-
Must be easily updateable
-
Must download quickly
7.2.3. Example 3
An “Agile with Discipline” approach for mobile app development
| Taken from [IBM] |
7.2.4. Example 4
Multi-target User Interface design & Generation using MDE
-
(see [Veldhuis2013]) image::Veldhuis.png[width="100%"]
| Taken from [Veldhuis2013] |
8. Reverse Engineering tools
9. Etude de cas: VoisMaBalade
9.1. Cahier des charges
La société VoisMaBalade propose à tout un chacun de présenter ses activités sportives dans le domaine de la montagne.
Son concept repose sur un site Web permettant de présenter les diverses pratiques sportives (randonnées, sorties en ski de randonnée, sorties en VTT et escalade) de ses utilisateurs, ces pratiques étant recueillies via une application mobile.
L’application à développer devra fonctionner sur des mobiles et tablettes Android . Pour chacune de ses activités, l’utilisateur pourra créer une activité, enregistrer son tracé (le cas échéant) ou la renseigner, la consulter ou la supprimer. Il conviendra d’utiliser le GPS de l’appareil mobile afin d’enregistrer une trace, de positionner la trace sur une carte de type Google Maps (fourni par un Web service). Les données seront d’abord sauvegardées en local, puis sur un serveur dédié.
Une activité est attachée à un parcours pour la randonnée, le ski de randonnées et le VTT et à une voie pour l’escalade. Un parcours est caractérisé par un point de départ, un point d’arrivée, un dénivelé positif et négatif, et son tracé. Une randonnée est caractérisée par son temps de parcours, une sortie de ski de randonnées par son engagement (de 1 à 4) et une sortie de VTT par sa distance en kilomètres. Une voie est caractérisée par sa cotation (de 4 à 9, chaque niveau étant sous-coté de A à C – par exemple une voie est cotée 6A) et sa géolocalisation (un point GPS).
Afin de permettre aux professionnels de la montagne d’utiliser cette application, il sera possible d’accéder à un profil d’utilisateur particulier représentant une entreprise. Dans ce cas, il lui sera possible de promouvoir ses activités moyennant finances, en établissant un contrat pour chaque activité qu’il souhaite promouvoir. Ce contrat définira les dates de début et de fin de promotion ainsi que le montant du contrat. Les données de l’utilisateur sont son pseudo, son nom, son prénom et son adresse mail.
À part le pseudo qui reste public, il peut choisir si chacune de ses données est publique ou non. Un utilisateur professionnel aura pour données un nom d’entreprise, son adresse postale, son adresse mail, son site web et un numéro de téléphone. Pour les deux profils, on disposera d’une photo toujours publique. Concernant la consultation, il faudra pouvoir effecteur une recherche selon un critère défini. Les activités seront accessibles selon une organisation géographique en zones et sous-zones couvrant des zones géographiques de plus en plus restrictives jusqu’au lieu de l’activité. Chaque zone est caractérisée par les coordonnées des 4 points formant la tuile rectangulaire la couvrant.
9.2. Questions
-
Donnez le diagramme des cas d’utilisation de cette application.
Figure 22. Une correction possible -
Donnez le diagramme de domaine de cette application.
Figure 23. Une correction possible -
Quel type de diagramme utiliser pour représenter un écran de votre application?
Un écran est composé d’éléments structurels. Il convient donc de le représenter avec un diagramme de classe. Les enchainements d’écrans peuvent être décrits comme des comportements. On pourra utiliser un d’état-transition.
-
Quel type de diagramme utiliser pour représenter un enchainement d’écrans ? Réalisez un diagramme de votre choix pour représenter les écrans principaux de votre application et leur enchaînement.
Les enchainements d’écrans peuvent être décrits comme des comportements. On peut utiliser :
-
un d’état-transition (cf. Figure ci-dessous),
-
un outil de sketchs, genre Balsamiq
-
un outil qui génère du code, genre Android Studio
-
9.3. Tools
-
For sketch: https://iutblagnac.mybalsamiq.com/projects/voismabalade
-
For UML™: Papyrus4Education
9.4. Expected outputs
-
Rapport au format
.pdf -
démo au format de votre choix (PPT/PDF, Vidéo)
-
.zipavec figures, modèles.uml, code, etc.
References and useful links
References
-
[HighsmithFowler2001] Jim Highsmith and Martin Fowler. The agile manifesto. Software Development Magazine, 9(8) :29–30, 2001.
-
[1030005] Kieran Conboy and Brian Fitzgerald. Toward a conceptual framework of agile methods : a study of agility in different disciplines. In WISER ’04 : Proceedings of the 2004 ACM workshop on Interdisciplinary software engineering research, pages 37–44, New York, NY, USA, 2004. ACM.
-
[Roques2007a] Les Cahiers du Programmeur, UML2, Pascal Roques 3ème Edition, Eyrolles, 2007.
-
[Roques2007b] UML 2 par la pratique, Pascal Roques 6ème Edition, Eyrolles, 2007.
-
[Blanc2006] UML pour les développeurs, Xavier Blanc, Eyrolles, 2006.
-
[Longepe2006] Le projet d’urbanisation du S.I., C. Longépé, 3ème édition, Dunod, 2006.
-
[Gillet2008] Management des SI, M. & P. Gillet, Dunod, 2008.
-
[Muller] Modélisation objet avec UML. {pam} & Nathalie Gaetner, Eyrolles, 2003.
Links
-
[IBM] http://asmarterplanet.com/mobile-enterprise/blog/2015/01/agile-discipline-approach-mobile-app-development.html
-
[uml-diagrams] http://www.uml-diagrams.org/android-application-uml-deployment-diagram-example.html
-
[[[Android Design]]] http://www.javacodegeeks.com/2013/07/android-uml-design-an-app-part-1.html
-
http://www.inf.ed.ac.uk/publications/thesis/online/IM100767.pdf
-
http://fr.slideshare.net/LiliaSfaxi/p1-introduction-a-android
-
http://www.qualitystreet.fr/2010/07/07/prototypage-agile-papier-tableau-blanc-et-balsamiq/
-
[Veldhuis2013] http://essay.utwente.nl/63418/1/MScThesis_OudeVeldhuis_FINAL.pdf
Glossary
|
Ressources
The following definitions are only informative. You can find usefull other sources here: |
- DRY
-
Don’t Repeat Yourself :
- IHM
-
Interface Homme-Machine
- MCF
-
Modèle Conceptuel des Flux
- MCT
-
Modèle Conceptuel des Traitements
- MOA/MOE
-
Maîtrise d’ouvrage (MOA) Maîtrise d’oeuvre (MOE)
- MOF
-
Modèle Organisationnel des Flux
- MOT
-
Modèle Organisationnel des Traitements
- OMG
-
Object Management Group
- PPN
-
Programme Pédagogique National
- SEF
-
Schéma d'Enchaînement des Fenêtres
- SEP
-
Schéma d'Enchaînement des Pages
- SI
-
Système d'Information
- SNI
-
Schéma de Navigation d'Interfaces
- SO
-
Système Organisationnel
- SysML
-
System Modeling Language ™
- TRL
-
Technology Readiness Level
- URL
-
Universal Ressource Locator